<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>核心业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>物业收费管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="房屋号">
            <el-input v-model="formInline.houseId"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item label="缴费状态">
            <el-select v-model="formInline.chargeState">
              <el-option label="已缴费" value='1'></el-option>
              <el-option label="未缴费" value='0'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Submit">筛选</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
        <el-button type="warning" @click="deletes()">删除</el-button>
        <el-tooltip content="刷新" placement="bottom">
          <el-button icon="el-icon-refresh-left" style="margin: 0 0 0 10px" @click="reFresh()"></el-button>
        </el-tooltip>
        <el-dialog title="添加车位用户" :visible.sync="dialogFormVisible">
          <el-form :model="property">
            <el-form-item label="房屋号" :label-width="formLabelWidth">
              <el-input v-model="property.houseId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物业" :label-width="formLabelWidth">
              <el-input v-model="property.chargeProject" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否缴费" :label-width="formLabelWidth">
              <el-select v-model="property.chargeState">
                <el-option label="已缴费" value='1'></el-option>
                <el-option label="无缴费" value='0'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="缴费时间" :label-width="formLabelWidth">
              <el-input v-model="property.startTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="到期时间" :label-width="formLabelWidth">
              <el-input v-model="property.endTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="缴费金额" :label-width="formLabelWidth">
              <el-input v-model="property.chargeMoney" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="property.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-table
            :data="carChargeArr"
            style="width: 100%"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            height="250"
            border>
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="houseId"
              label="房屋号"
              width="80">
          </el-table-column>
          <el-table-column
              prop="chargeProject"
              label="物业"
              width="80">
          </el-table-column>
          <el-table-column
              prop="startTime"
              label="缴费时间">
          </el-table-column>
          <el-table-column
              prop="endTime"
              label="结束时间">
          </el-table-column>
          <el-table-column
              prop="chargeMoney"
              label="金额">
          </el-table-column>
          <el-table-column
              prop="chargeState"
              label="状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.chargeState==1">已缴费</el-tag>
              <el-tag type="danger" v-else>无缴费</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="dialogFormVisible1 = true">缴费
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="deleteRow(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注">
          </el-table-column>
        </el-table>
        <el-dialog title="缴费" :visible.sync="dialogFormVisible1">
          <el-form :model="property">
            <el-form-item label="房屋号" :label-width="formLabelWidth">
              <el-input v-model="property.houseId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="费用" :label-width="formLabelWidth">
              <el-input v-model="property.chargeProject" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否缴费" :label-width="formLabelWidth">
              <el-select v-model="property.chargeState">
                <el-option label="已缴费" value=1></el-option>
                <el-option label="无缴费" value=0></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="缴费时间" :label-width="formLabelWidth">
              <el-input v-model="property.startTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="到期时间" :label-width="formLabelWidth">
              <el-input v-model="property.endTime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="缴费金额" :label-width="formLabelWidth">
              <el-input v-model="property.chargeMoney" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input v-model="property.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="handleEdit()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      formInline: {
        carId: '',
        chargeState: ''
      },
      carChargeArr: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      property: {
        id: '',
        houseId: '',
        chargeProject: '',
        startTime: '',
        chargeState: '',
        endTime: '',
        chargeMoney: '',
        remark: ''
      },
      multipleSelection: []
    }
  },
  created: function () {
    this.searchCar()
  },
  methods: {
    reFresh() {
      this.searchCar();
    },
    handleEdit() {
      this.dialogFormVisible1 = false
      this.$message.success("缴费成功")
      this.axios.post("http://localhost:8080/property/edit/update", this.property).then((response) => {
        this.searchCar();
      })
    },
    add() {
      this.dialogFormVisible = false
      this.$message.success("添加用户成功")
      this.axios.post("http://localhost:8080/property/add/insert", this.property).then((response) => {
        this.searchCar();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchCar() {
      this.axios.post("http://localhost:8080/property/search/select").then((response) => {
        this.carChargeArr = response.data
      })
    },
    deleteRow(index, row) {
      this.axios.post("http://localhost:8080/property/user/delete", row).then((response) => {
        if (response.data == 1) {
          this.$message.success("删除用户成功")
        } else {
        }
        this.searchCar();
      })
    },
    deletes() {
      this.axios.post("http://localhost:8080/property/users/delete", this.multipleSelection).then((response) => {
        if (response.data == 1) {
          this.$message.success("删除用户成功")
        } else {
        }
        this.searchCar();
      })
    },
    onSubmit() {
      axios.post("http://localhost:8080/property/select", this.formInline)
          .then((response) => {
            this.carChargeArr = response.data;
          })
    },
    Submit() {
      axios.post("http://localhost:8080/property/selects", this.formInline)
          .then((response) => {
            this.carChargeArr = response.data;
          })
    },
  }
}
</script>